<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<title>XuLuo</title>
	<style>
		.swiperW{overflow:hidden;position:relative;}
		.swiperW .swiper{height:100%;}
		.swiperW .swiper .item{float:left;position:relative;height:100%;}
		.swiperW .swiper .item.active .animated{-webkit-animation-duration: 1s; animation-duration: 1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;opacity:1;}
		.swiperW .swiper .item:not(.active) .animated{-webkit-animation:none;animation:none;opacity:0}
		.swiperW .swiper .item img{width:100%}
		.swiperW .cir{position:absolute;left:50%;-webkit-transform:translate3d(50%,0,0);transform:translate3d(-50%,0,0);bottom:5px}
		.swiperW .cir a{display:inline-block;width:10px;height:10px;margin:0 5px;background:#000;opacity:.5;border-radius:50%}
		.swiperW .cir a.on{background:#FFEA00;opacity:1}
		/*竖屏滑动，只需给body,html,.swiperW加上高度值100%*/
		html,body{width: 100%;height: 100%;padding: 0;}
		.swiperW{height: 100%}
		/*左右切换按键*/
		.button{display: inline-block;position: absolute;font-size: 30px;color: #000;top: 50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);}
		/*动画*/
		@-webkit-keyframes fadeInUp {
		    from {
		        opacity: 0;
		        -webkit-transform: translate3d(0, 100%, 0);
		        transform: translate3d(0, 100%, 0);
		    }

		    100% {
		        opacity: 1;
		        -webkit-transform: none;
		        transform: none;
		    }
		}

		@keyframes fadeInUp {
		    from {
		        opacity: 0;
		        -webkit-transform: translate3d(0, 100%, 0);
		        transform: translate3d(0, 100%, 0);
		    }

		    100% {
		        opacity: 1;
		        -webkit-transform: none;
		        transform: none;
		    }
		}

		.fadeInUp {
		    -webkit-animation-name: fadeInUp;
		    animation-name: fadeInUp;
		}
	</style>
</head>
<body>
	<div id="carousel" class="swiperW">
		<ul class="swiper">
			<li class="item"><img src="images/bnr1.png"><p class="fadeInUp animated">动画测试111</p></li>
			<li class="item"><img src="images/bnr2.png"><p class="fadeInUp animated">动画测试222</p></li>
			<li class="item"><img src="images/bnr3.png"><p class="fadeInUp animated">动画测试333</p></li>
		</ul>
		<a href="javascript:;" class="button prev" style="left: 15px"><</a>
		<a href="javascript:;" class="button next" style="right: 15px">></a>
	</div>
	<!-- 必须引入的js -->
	<script type="text/javascript" src="js/swiper.js"></script>
	<script type="text/javascript">
		// 轮播
		var swiper = new Swiper({
			container:'.swiperW .swiper',
		    // autoPlay:3500,
		    // cir:'.cir', //circle圆点div类名
		    prev:'.prev',
		    next:'.next',
		    // direction: 'horizontal' //horizontal
		});
	</script>
</body>
</html>